<template>
  <div id="patients">
    <div class="search">
       <el-select v-model="sou.cha">
      <el-option label="医疗卡号" value="PersonNo"></el-option>
    </el-select>
     <el-input v-model="sou.zhi"></el-input>
        <el-button size="mini" type="success"  @click="search" style="margin-right:10px">查询</el-button>
          <el-button size="mini" type="success" @click="refresh()">重置</el-button>
    </div>
     <el-table :data="formData.data" style="width: 100%">
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="卡号" >
        <template slot-scope="scope">
          <span>{{ scope.row.personNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="生日">
        <template slot-scope="scope">
          <span>{{ timez(scope.row.birthDate) }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="地址">
        <template slot-scope="scope">
          <span>{{ scope.row.contactAddress }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="身份">
        <template >
          <span style="color:#85CE61">外校人员</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="登记时间">
        <template slot-scope="scope">
          <span>{{timez(scope.row.registerDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" @click="openXiu(scope.row)">修改</el-button>
          <el-button size="mini" @click="deleteDataTy(scope.row.id)" disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <div class="pagination">
      <el-pagination layout="prev, pager, next" :total="pages" :page-size="pageSize"  @current-change="handleCurrentChange"></el-pagination>
    </div>
     <div id="add">
    <el-dialog title="修改病人信息" :visible.sync="isshow" :modal-append-to-body="false">
    <el-form :model="changeForm" status-icon :rules="rules" ref="changeForm" label-width="50px" class="demo-ruleForm">
       <el-form-item
    label="卡号"
    label-width="100px"
    prop="personNo">
    <el-input type="text" v-model="changeForm.personNo" disabled></el-input>
  </el-form-item>
      <el-form-item
    label="姓名"
    label-width="100px"
    prop="name">
    <el-input type="text" v-model="changeForm.name"></el-input>
  </el-form-item>
    <el-form-item
    label="电话"
    label-width="100px"
    prop="telephone">
    <el-input type="text" v-model="changeForm.telephone" ></el-input>
  </el-form-item>
    <el-form-item
    label="地址"
    label-width="100px"
    prop="contactAddress">
    <el-input type="text" v-model="changeForm.contactAddress" ></el-input>
    </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button type="primary" @click="submit('changeForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>
<script>
import {time}from'@/utils/time'
import{mapActions,mapMutations,mapGetters}from'vuex'

export default {
  name:'ourPatients',
  components:{
    
  },
  data(){
    //姓名
     var checkName = (rule, value, callback) => {
     let nameReg = /^([\u4e00-\u9fa5]{2,10}|[a-zA-Z.\s]{2,20})$/
        if (!value) {
          callback(new Error('姓名不能为空'));
        } 
        setTimeout(() => {
          if (nameReg.test(value)==false) {
            callback(new Error('姓名为2-10个中文或英文'));
          } else {
              callback();
          }
        }, 1000);
      };
      //电话
      var checkPhone = (rule,value,callback)=>{
        let phoneReg = /^1[3|5|7|8]\d{9}$/
        if (!value) {
          callback(new Error('电话不能为空'));
        } 
        setTimeout(() => {
          if (phoneReg.test(value)==false) {
            callback(new Error('请输入以1开头，第二位为3/4/5/7/8的任意一个,总共11为数字的电话号码'));
          } else {
              callback();
          }
        }, 1000);
      }
       var checkDizhi = (rule,value,callback)=>{
        let phoneReg = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]+$/
        if (!value) {
          callback(new Error('住址不能为空'));
        } 
        setTimeout(() => {
          if (phoneReg.test(value)==false) {
            callback(new Error('住址只能有汉字和数字，字母（不能全为数字或字母）'));
          } else {
              callback();
          }
        }, 1000);
      }
    return{
      formData:[],
      changeForm:[],
       rules: {
          name: [
            { validator: checkName, trigger: 'blur' }
          ],
           telephone: [
            { validator: checkPhone, trigger: 'blur' }
          ],
          contactAddress: [
            { validator: checkDizhi, trigger: 'blur' }
          ],
         
       },
      //模态框
      isshow:false,
      kind:'',
      //搜索用
     sou:{
       cha:'',
       zhi:''
     },
      nowpage:1,
      pageSize:3,
     
    }
  },
  created(){
    this.getFormData(1)
  },
  methods:{
     ...mapActions(['tongyong']),
      timez(obj){
      return time(obj)
    },
    //重置
     refresh(){
      console.log('9999')
      this.getFormData(1)
    },
       //获取当前页
    handleCurrentChange(val){
        this.nowpage = val
        console.log(this.nowpage)
        this.getFormData(this.nowpage)
        }, 
      //获取所有外校人员数据
      getFormData(nowpage){
       
         let page=nowpage
         let pageSize = this.pageSize
         let status = '03'
       this['tongyong']({
        name:'GET_STATUS',
        data:{page,pageSize,status}
      }).then(resp=>{
          if(resp.data.code==200){
            console.log(resp)
            this.formData = resp.data
          }else{
            console.log('查询失败')
          }
         
      })
      
      },
      //打开修改
      openXiu(row){
        this.isshow = true
        this.changeForm = row
      },
      //修改
      submit(obj){
         console.log('0000')
          //  console.log(this.changeForm)
      this.$refs[obj].validate((valid) => {
          if (valid) {
            console.log(this.changeForm)
            this.changeForm.birthDate = time(this.changeForm.birthDate)
             this['tongyong']({
         name:'UPDATA_PATIENTS',
        data:this.changeForm
         }).then(resp=>{
           if(resp.data.code==200){
             this.getFormData(1)
              this.$message('修改成功')
           }else{
              this.$message('修改失败')
           }
          this.isshow = false 
          })
          } else {
            this.$message('信息不完善');
            return false;
          }
        });
      },
    search(){
      if(this.sou.cha == 'PersonNo'){
         let page = String(this.nowpage)
        let pageSize = String(this.pageSize)
        let no = this.sou.zhi
         this['tongyong']({
        name:'CHA_PATIENTSBYNO',
        data:{page,pageSize,no}
      }).then(resp=>{
     console.log(resp)
      this.formData = resp.data

      })
      this.sou = {}
      }else{
        this.$message('请选择查询方式')
      }
       
    },
    add(){

    }
  },
   computed:{
    pages(){
      return this.formData.count
    }
   }
  
};
</script>
<style lang="less" scoped>.search{
  display: flex;
  justify-content: center;
  margin-bottom:10px;
  .el-input{
    width:200px;
  }
}
.el-button+.el-button{
  margin: 0;
}</style>
